<template>
    <div class="container login-page">
        <mt-button type="default" class="goback" @click="goback">返回</mt-button>
        <header class="login-page">
            <img src="../assets/images/meituan_big.png" alt="">
        </header>
        <main>
            <div class="phone-number" :class=" active==1 ? 'active' : '' ">
                <span class="cityarea">中国 +86</span>
                <span class="arrow"></span>
                <input type="text" placeholder="请输入手机号" class="phone_input login-page" @focus="changecolor($event,1)">
            </div>
            <component :is="component"></component>
            <div class="toggle">
                <span class="toggle_type" @click="changeType($event)">账号登录</span>
            </div>
        </main>
    </div>
</template>

<script>
    export default {
        data:function(){
            return {
                active:0,
                component:'verify'
            }
        },
        methods:{
            changeType(event){
                if(event.target.innerHTML == '账号登录'){
                    event.target.innerHTML = '手机验证码登录';
                    this.component = 'password';
                }else {
                    event.target.innerHTML = '账号登录';
                    this.component = 'verify'
                }
            },
            changecolor(event,index){
                this.active = index;
                event.target.onblur = () => {
                    this.active = 0;
                }
            },
            goback(){
                this.$router.go(-1);
            }
        },
        components:{
            'verify':{
                template:`
                    <div>
                        <div class="verify" :class=" active==2 ? 'active' : '' ">
                            <input type="text" placeholder="请输入验证码" class="verify-code login-page" @focus="changecolor($event,2)">
                            <a href="javascript:;"><span class="separate">|</span>获取验证码</a>
                        </div>
                        <div class="btn">
                            <button>登录</button>
                        </div>
                        <div class="login-tips">
                            未注册的手机号验证后自动创建美团账户
                        </div>
                    </div>
                `,
                data:function(){
                    return {
                        active:0
                    }
                },
                methods:{
                    changecolor(event,index){
                        this.active = index;
                        event.target.onblur = () => {
                            this.active = 0;
                        }
                    }
                }
            },
            'password':{
                template:`
                    <div>
                        <div class="verify pwd" :class=" active==2 ? 'active' : '' ">
                            <input :type="index==0 ? 'password' : 'text' " placeholder="请输入密码" class="verify-code login-page" @focus="changecolor($event,2)">
                            <a href="javascript:;"><span class="separate">|</span>忘记密码</a>
                            <div class="eye" @click="eye_change">
                                <img :src=" index==0 ? './src/assets/images/eye_close.png' : './src/assets/images/eye_open.png' " alt="" />
                            </div>
                        </div>
                        <div class="btn">
                            <button>登录</button>

                        </div>
                    </div>
                `,
                data:function(){
                    return {
                        active:0,
                        index:0
                    }
                },
                methods:{
                    changecolor(event,index){
                        this.active = index;
                        event.target.onblur = () => {
                            this.active = 0;
                        }
                    },
                    eye_change(){
                        this.index = (this.index+1) % 2;
                    }
                }
            }
        }
    }
</script>

<style>
    input.login-page {
        height: 35px;
        outline: none;
        border: 0;
        color: #333333;
        caret-color: #ffc300;
    }
    input.login-page:focus {
        color:#000;
        font-size: 22px;
    }
    input::-webkit-input-placeholder {
        font-size: 22px;
        color: #CCC;
        font-weight: 300;
    }
    .container.login-page {
        padding: 10px 30px;
    }
    header.login-page {
        display: flex;
        justify-content: center;
        margin-top: 30px;
        margin-bottom: 50px;
    }
    header.login-page img {
        width: 87px;
        height: 87px;
        /* text-align: center; */
    }
    .goback {
        height: 37px;
        line-height: 37px;
        background-color: #FFD000;
    }
    .phone-number {
        display: flex;
        height: 40px;
        border-bottom: 1px solid #999;
        margin-bottom: 20px;
        align-items: center;
        font-size: 13px;
        color: #414244;
    }
    .phone-number .arrow {
        width: 7px;
        height: 7px;
        border-right: 1px solid #414244;
        border-bottom: 1px solid #414244;
        margin-right: 15px;
        transform: rotate(-45deg);
    }

    .phone-number .phone_input {
        flex: 1;
    }
    .verify {
        display: flex;
        height: 40px;
        border-bottom: 1px solid #999;
        justify-content: space-between;
        align-items: center;
        font-size: 13px;
        color: #999;
    }
    .verify a {
        margin-left: 7px;
        color: #999;
    }
    .verify .separate {
        margin-right: 7px;
    }
    .phone-number.active,
    .verify.active {
        border-bottom-color: #ffc300;
    }
    .btn {
        width: 100%;
        margin-top: 22px;
    }
    .btn button {
        width: 100%;
        outline: none;
        border: 0;
        color: #222222;
        font-family: PingFangSC-Medium;
        opacity: 0.3;
        border-radius: 10px;
        height: 45px;
        line-height: 45px;
        background-color: #FE8C00;
        background-image: linear-gradient(-133deg, #FFBD00 0%, #FFD000 100%);
        font-size: 15px;
    }
    .login-tips {
        font-size: 0.24rem;
        color: #999;
        text-align: center;
        margin-top: 0.25rem;
        height: 2rem;
        font-family: PingFangSC-Regular;
        line-height: 28px;
    }
    .toggle {
        display: flex;
        margin-top: 20px;
        justify-content: center;
    }
    .toggle_type {
        padding: 0.5rem 0.1rem 0.1rem 0.1rem;
        /* display: inline-block; */
        cursor: pointer;
        font-family: PingFangSC-Regular;
        font-size: .24rem;
        color: #555555;
        line-height: .28rem;
    }
    .pwd {
        position: relative;
    }
    .pwd .eye {
        position: absolute;
        top: 12px;
        right: 70px;
        width: 20px;
    }
    .pwd .eye img {
        width: 100%;
    }
</style>


